<script setup>

import {onMounted, reactive, ref} from "vue";
import router from "@/router/index";
import {getRoleWithExpiration} from "@/components/cookie.js";

const isSuper = ref(getRoleWithExpiration() === 'USER_ROLE_SUPER');


const headmenu =reactive({
  name:'用户管理'
})

const logout =()=>{
  window.localStorage.clear();
  router.push({path:'/'})
}



function toEmployee(){
  router.push({path:'/user'})
  headmenu.name='用户管理'
}

function toClassfiy(){
  router.push({path:'/adminpost'})
  headmenu.name='帖子管理'
}

function toMenu(){
  router.push({path:'/comment'})
  headmenu.name='评论管理'
}

function toAdminUser(){
  router.push({path:'/adminuser'})
  headmenu.name='管理员管理'
}

function postreview(){
  router.push({path:'/postreview'})
  headmenu.name='帖子审核'
}

function tocomment(){
  router.push({path:'/commentreview'})
  headmenu.name='评论审核'
}

</script>

<template>
  <div class="common-layout">

    <el-container class="home-container">
      <!--        侧边栏-->
      <el-aside width="200px">
        <div class="logo">
          <el-menu
              background-color="#343744"
              text-color="#bfcbd9"
              active-text-color="#f4f4f5"
          >


            <el-menu-item index="0">
              <template #title>
              </template>
            </el-menu-item>
            <el-menu-item index="1" @click="toEmployee">
              <template #title>
                <el-icon><User/></el-icon>
                <span>用户管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2" @click="toAdminUser" v-if="isSuper">
              <template #title>
                <el-icon><User/></el-icon>
                <span>管理员管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2" @click="toClassfiy">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>帖子管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2" @click="postreview">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>帖子审核</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3" @click="toMenu">
              <template #title>
                <el-icon><ChatDotSquare /></el-icon>
                <span>评论管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3" @click="tocomment">
              <template #title>
                <el-icon><ChatDotSquare /></el-icon>
                <span>评论审核</span>
              </template>
            </el-menu-item>
          </el-menu>
        </div>

      </el-aside>

      <el-container>
        <!--          头部-->
        <el-header class="header-container">
          <div class="header-left">
            <b>{{ headmenu.name }}</b>
          </div>
          <img src="@/assets/img/img.png" class="outLogin" alt="退出" @click="logout" />

        </el-header>
        <!--          主体-->
        <el-main>
          <div class="main-view">
            <router-view></router-view>
          </div>


        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.home-container{
  height: 100vh;
}

.el-aside{
  background-color: #343744;
  text-color:#bfcbd9;
  active-text-color:#f4f4f5;
  width: 10vw;
}
.header-container {
  width: 90vw;
  background-color: white;
  display: flex;
  justify-content: space-between; /* 将子元素分布到容器的两端 */
  align-items: center; /* 垂直居中 */
}

.header-right{
  height: 30px;
  width: 30px;
}

.el-main{
  background-color: #f3f3f3;
  width: 90vw;
}

.main-view{
  background-color: white;
  border-radius: 5px;
  width: 90vw;
  padding-bottom: 20px;
}

.logo-img{
  width: 120px;
  height:34px;
  margin: 50px 0 50px 35px;
}

.outLogin{
  width: 30px;
  height: 30px;
}
</style>